<template>
  <div id="main" class="main"/>
</template>

<script>
import * as echarts from 'echarts'
import suqian from './suqian.json'


export default {
  data() {
    return {

    }
  },
  mounted() {
    this.init()
  },
  methods: {
    init() {
      const MyChart = echarts.init(document.getElementById('main'))
      echarts.registerMap('宿迁市', suqian)
      const option = {
            // 悬浮窗
            tooltip: {
              trigger: 'item',
              formatter: function(params) {
                //alert(JSON.stringify(params))
                console.log('悬浮窗时间事件', params);
                return `${params.name}: ${params.value || 10}
                <p>入驻商家：50</p>
                <p>认证：56</p>
                <h>金额：${params.componentType}</h>`
              }
            },
            itemStyle: {
              areaColor: '#f00'
            },
          series: [{ 
                            type: 'map',
                            map: '宿迁市',
                            // 自定义命名映射，不设置的话，label默认是使用 geoJson中的name名
                            nameMap: {
                              '北京市': "北京重命名",
                              "天津市": '天津重命名'
                            },
                          }] 
        }
      // 将配置应用到地图上
      MyChart.setOption(option)
      // 当鼠标在地图上时
      MyChart.on('mouseover', {series: 0}, (params) => {
        console.log('鼠标移入')
      })
      // 当鼠标移出地图后
      MyChart.on('mouseout', {series: 0}, (params) => {
        //alert("456")
        console.log('鼠标移出')
      })
    }
  }
}
</script>

<style scoped>
.main {
  width: 500px;
  height: 500px;
}
</style>

